<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>login</title>
		<link rel="stylesheet" href="../../style/login/login.css">
		<link rel="short cut" href="../../favicon.ico" />
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- <link href="css/login.css" rel="stylesheet"> -->
	</head>

	<body>
		<div id="app">
			<form id="form" method="post">
				<h1 id="loginMsg">LOGIN IN</h1>
				<p>
					<label for="username">Username:</label>
					<input id="username" v-model="username" name="username" type="text" autocomplete="off">
				</p>

				<p>
					<label for="password">Password:</label>
					<input id="password" v-model="password" name="password" type="password" @keyup.enter="login">
				</p>
				<div id="subDiv">
					<input type="button" @click="login" class="loginButton" value="login up">
					<input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
				</div>
			</form>
		</div>
	</body>
</html>

<script type="text/javascript" src="../../plugins/jQuery/jquery-3.6.0.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type=" text/javascript" src="../../js/axios.min.js"></script>
<script type="text/javascript" src="../../plugins/layer-master/dist/layer.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data() {
			return {
				username: '',
				password: ''
			}
		},
		methods: {
			login() {
				let data = new URLSearchParams()
				data.append('username', this.username)
				data.append('password', this.password)
				axios({
					method: 'post',
					url: 'http://localhost:9000/user/login',
					data: data
				}).then(resp => {
					if (!resp.data.success) {
						this.$message({
							message: resp.data.error,
							type: 'error'
						});
						return
					}
					this.$message({
						message: '登陆成功',
						type: 'success',
						duration: 1000,
						onClose: function() {
							// 保存token到前台
							localStorage.setItem('token', resp.data.data)
							// 跳转
							location.href = '../../index.html'
						}
					});
				}).catch(e => {
					this.$message({
						message: JSON.parse(e.request.response).error,
						type: 'error'
					});
				})
			}
		}
	})
</script>